跳到主要内容

Switch 开关

介绍

使用开关切换两种状态之间。

用法

基本引入

import { FQSwitch } from '@fq/fq-weapp-ui';

组件依赖的样式文件(仅按需引用时需要)

import '@fq/fq-weapp-ui/dist/styles/components/switch.scss';

基础用法

<FQSwitch />

不可用

<FQSwitch disabled />

文字和图标

<FQSwitch checkedChildren='开启' unCheckedChildren='关闭' />
<FQSwitch checkedChildren='1' unCheckedChildren='0' />

大小

<FQSwitch size='large' />
<FQSwitch />
<FQSwitch size='small' />

API

属性

参数说明类型默认值版本
checked指定当前是否选中booleanfalse
checkedChildren选中时的内容ReactNode-
defaultChecked初始是否选中booleanfalse
defaultValuedefaultChecked 的别名boolean-
disabled是否禁用booleanfalse
size开关大小,可选值 large, default, smallstringdefault
unCheckedChildren非选中时的内容ReactNode-
valuechecked 的别名boolean-
onChange变化时回调函数function(checked: boolean, event: ITouchEvent)-
onClick点击时的回调函数function(checked: boolean, event: ITouchEvent)-